<template>
  <div class="orderDetail">
    <!-- 头部提示信息 -->
    <div class="header-info">
      <div class="success-text">支付成功，请您前往指定门店消费</div>
    </div>
    
    <!-- 门店信息 -->
    <div class="store-info">
      <div class="store-content">
        <img :src="orderInfo.merchantImgs.img.split(',')[0]" class="store-icon" />
        <div class="store-details">
          <div class="store-name">{{ orderInfo.merchant.name }}</div>
          <div class="store-address">{{ orderInfo.merchant.address }}</div>
        </div>
        <div class="navigation-btn" @click="navigateToStore">
          <uni-icons type="location" size="20" color="#1989fa"></uni-icons>
        </div>
      </div>
    </div>
    
    <!-- 订单详情 -->
    <div class="order-section">
      <div class="section-title">订单详情</div>
      <div class="section-content">
        <!-- 服务项目 -->
        <div v-for="item in serviceItems" class="service-item">
          <div class="service-name">{{ item.name }}</div>
          <div class="service-price">¥{{ item.presentPrice }}</div>
        </div>
        <!-- <div class="service-item">
          <div class="service-name">车辆附加费用</div>
          <div class="service-price">¥199</div>
        </div> -->
        
        <!-- 价格明细 -->
        <div class="price-item">
          <div class="price-label">原价</div>
          <div class="price-value">¥{{ totalPrice }}</div>
        </div>
        <div class="price-item">
          <div class="price-label">优惠</div>
          <div class="price-discount">-¥{{ totalPrice - orderInfo.price }}</div>
        </div>
        <div v-if="orderInfo.coupon" class="price-item">
          <div class="price-label">优惠券</div>
          <div class="price-discount">-¥{{ orderInfo.coupon.preferentialMoney }}</div>
        </div>
        
        <!-- 支付金额 -->
        <div class="total-price">
          <div class="total-label">支付金额</div>
          <div class="total-value">¥{{ orderInfo.price }}</div>
        </div>
      </div>
    </div>
    
    <!-- 订单信息 -->
    <div class="order-section">
      <div class="section-title">订单信息</div>
      <div class="section-content">
        <div class="info-item">
          <div class="info-label">订单号：</div>
          <div class="info-value">{{ orderInfo.id }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">下单时间：</div>
          <div class="info-value">2020.01.08 17:40</div>
        </div>
        <div class="info-item">
          <div class="info-label">预约时间：</div>
          <div class="info-value">{{ orderInfo.reservationTime }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">车辆：</div>
          <div class="info-value">{{orderInfo.carType.name+"/"+orderInfo.carInfo.carNum}}/{{   }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">备注：</div>
          <div class="info-value">{{ orderInfo.remark }}</div>
        </div>
      </div>
    </div>
    
    <!-- 底部按钮 -->
    <div class="bottom-buttons">
      <button class="contact-btn" @click="contactMerchant">联系商家</button>
      <button class="confirm-btn" @click="confirmService">确认服务</button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request.js'
export default {
  components: {},
  data() {
    return {
      orderInfo: {},
      serviceItems: [],
      totalPrice: 0
    }
  },
  computed: {},
  methods: {
    // 联系商家
    contactMerchant() {
      uni.makePhoneCall({
        phoneNumber: '13800138000'
      });
    },
    
    // 确认服务
    confirmService() {
      uni.showToast({
        title: '服务确认成功',
        icon: 'success'
      });
    },
    
    // 导航到门店
    navigateToStore() {
      uni.openLocation({
        latitude: 35.2345,
        longitude: 113.2345,
        name: '伟业汽车维修厂(人民路店)',
        address: '山阳区人民中路32号'
      });
    }
  },
  // 页面周期函数--监听页面加载
  onLoad() {
    request({
      url: '/pyh/order/detail/1070',
      method: 'get',
   
    }).then(res => {
      console.log('订单详情:', res);
      this.orderInfo = res.data.data;
      this.serviceItems = JSON.parse(this.orderInfo.orderUserMerchant.orderContent);
      this.totalPrice = this.serviceItems.reduce((total, item) => {
        return total + item.originalPrice;
      }, 0);
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
}
</script>

<style scoped>
.orderDetail {
  padding-bottom: 80rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部提示信息 */
.header-info {
  background-color: #1989fa;
  padding: 30rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

.success-text {
  font-weight: 500;
}

/* 门店信息 */
.store-info {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
}

.store-content {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.store-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.store-details {
  flex: 1;
}

.store-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.store-address {
  font-size: 28rpx;
  color: #666;
}

.navigation-btn {
  padding: 20rpx;
}

/* 订单区块 */
.order-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  padding: 30rpx 0 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-content {
  padding: 20rpx 0 30rpx;
}

/* 服务项目 */
.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  font-size: 28rpx;
}

.service-name {
  color: #333;
}

.service-price {
  color: #333;
  font-weight: 500;
}

/* 价格明细 */
.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  font-size: 28rpx;
}

.price-label {
  color: #666;
}

.price-value {
  color: #333;
}

.price-discount {
  color: #ff4757;
}

/* 支付金额 */
.total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0 10rpx;
  margin-top: 10rpx;
  border-top: 1rpx solid #f0f0f0;
  font-size: 30rpx;
}

.total-label {
  color: #333;
  font-weight: 500;
}

.total-value {
  color: #1989fa;
  font-weight: bold;
  font-size: 32rpx;
}

/* 订单信息 */
.info-item {
  display: flex;
  padding: 20rpx 0;
  font-size: 28rpx;
}

.info-label {
  color: #666;
  width: 200rpx;
}

.info-value {
  color: #333;
  flex: 1;
}

/* 底部按钮 */
.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.contact-btn {
  flex: 1;
  margin-right: 20rpx;
  background-color: #fff;
  color: #1989fa;
  border: 1rpx solid #1989fa;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.confirm-btn {
  flex: 1;
  background-color: #1989fa;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>